import React, { Component } from 'react';
import { Table, Button, Space, Card } from 'antd';
import api from '../../../api/api';

export default class Categories extends Component {
  state = {
    categories: [],
    showSubType: false,
  };

  async findAllCategroy(parentId) {
    let { data: res } = await api.catAPIs.findCategroy(parentId);
    // console.log(res);
    this.setState({
      categories: res.data.data,
    });
  }

  componentDidMount() {
    this.findAllCategroy(0);
  }
  render() {
    const { categories, showSubType } = this.state;

    const columns = [
      {
        title: '类型名字',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '类别',
        dataIndex: 'type',
        key: '_id',
      },

      {
        title: '操作',
        key: '_id',
        render: (text, record) => (
          <Space size="middle">
            <Button
              onClick={() => {
                this.setState({
                  showSubType: true,
                });
                this.findAllCategroy(record._id);
              }}
            >
              查看子分类
            </Button>

            <Button>删除</Button>
          </Space>
        ),
      },
    ];

    return (
      <Card title="品种管理">
        {showSubType ? (
          <div>
            <Button
              style={{ marginBottom: 20 }}
              onClick={() => {
                this.findAllCategroy(0);
                this.setState({
                  showSubType: false,
                });
              }}
            >
              返回上一级
            </Button>

            <Table
              bordered={true}
              loading={categories.length ? false : true}
              rowKey="_id"
              columns={columns}
              dataSource={categories}
              pagination={{ pageSize: 5 }}
            />
          </div>
        ) : (
          <Table
            bordered={true}
            loading={categories.length ? false : true}
            rowKey="_id"
            columns={columns}
            dataSource={categories}
            pagination={{ pageSize: 5 }}
          />
        )}
      </Card>
    );
  }
}
